import React from 'react';
import { Icon, Input } from 'antd';
import styles from './IconSelect.less';
class IconSelect extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            placeholder: props.placeholder || "请选择图标",
            value: props.value || "",
            maskShow: false,
            iconTypes: [
                "home", "user", "folder-open", "mail", "idcard", "control", "bell", "appstore", "customer-service", "environment",
                "eye-invisible", "eye", "filter", "fire", "flag", "funnel-plot", "heart", "like", "notification",
                "safety-certificate", "setting", "shopping", "sound", "tool", "thunderbolt", "tablet", "bars", "cloud-download",
                "cloud-upload", "download", "deployment-unit", "loading", "man", "menu", "search", "share-alt", "woman",
                "line-chart", "pie-chart", "fund", "delete", "redo", "question", "question-circle", "plus",
                "plus-circle", "pause", "pause-circle", "minus", "minus-circle", "plus-square", "minus-square", "info", "info-circle",
                "exclamation", "close", "close-circle", "close-square", "check", "check-circle", "check-square", "clock-circle", "warning",
                "issues-close", "stop", "edit", "form"
            ]
        }
    }

    onClick = () => {

    }

    onSelect = (value) => {
        const { onChange } = this.props;
        console.log("选择===" + value);
        this.setState({
            value
        })
        if (onChange) {
            onChange(value);
        }
    }

    inputOnBlur = () => {
        //延迟200ms关闭,防止值无法选中
        setTimeout(() => {
            this.setState({
                maskShow: false
            })
        }, 200)
    }

    inputOnFocus = () => {
        this.setState({
            maskShow: true
        })
    }

    render() {
        const { iconTypes, value, placeholder, maskShow } = this.state;
        const { onSelect, inputOnFocus, inputOnBlur } = this;
        return (<div className={styles.iconSelect}>
            <Input onFocus={inputOnFocus} onBlur={inputOnBlur} placeholder={placeholder} value={value}></Input>
            <div style={{ display: maskShow == true ? "flex" : "none" }} className={styles.iconMask + " rowRap"}>
                {
                    iconTypes.map((type) => {
                        return (<div key={type} onClick={onSelect.bind(this, type)} className={(type == value ? styles.iconItemChecked : styles.iconItem) + " centerXY"}>
                            <Icon style={{ fontSize: 16 }} type={type}></Icon>
                        </div>)
                    })
                }
            </div>
        </div>);
    }
}

export default IconSelect;
